<template>
  <div class="container mobileSearch">
    <div class="row">
      <!-- 导航栏 -->
      <mobile-navigation class="col-12 d-flex justify-content-around align-items-center bg-white">
        <img slot="left" src="@/assets/img/MobileBanner/back_dark.png" alt="" class="mr-4" style="height: 25px;" @click="backPath">
        <search-books slot="center" class="" style="width: 250px" />
      </mobile-navigation>
      <!-- 推荐搜索导航 -->
      <div class="col-12 bg-white d-flex justify-content-between align-items-center topSearch">
        <div class="">推荐搜索</div>
        <div class="d-flex align-items-center">
          <img src="@/assets/img/reload.png" alt="" class="topSearchImg mr-1">
          <div class="">ReloadSerach</div>
        </div>
      </div>
      <!-- 推荐搜索书籍 -->
      <div class="">
        
      </div>
    </div>
  </div>
</template>

<script>
  import MobileNavigation from 'components/Mobile/MobileNavigation.vue'
  import SearchBooks from 'components/Navigation/SearchBooks.vue'

  export default {
    name: 'MobileSearch',
    components: {
      MobileNavigation,
      SearchBooks
    },
    data () {
      return {

      }
    },
    methods: {
      backPath() {
        // 返回进入此组件之前的路由，这里不能保存上一级返回目录，
        // 因为地址是一个栈，每进入一个路由的时候就会压栈，会遵从先进后出，后进先出。
        this.$router.go(-1)
      }
    }
  }

</script>

<style >
  body {
    background-color: rgb(240, 240, 240);
  }
  .mobileSearch {
    margin-top: 54px;
    
  }
  .topSearch {
    height: 38px;
    border: 1px solid #eee;
    border-left: 0;
    border-right: 0;
  }
  .topSearchImg {
    width: 25px;
    height: 25px;
  }
  .topSearchImg:hover {
    transform: rotate(360deg);
    transition: all ease 1s;
  }
</style>